<template>
  <a-table
    :columns="columns"
    v-bind="$attrs"
    :data-source="dataSource"
    :pagination="false"
    class="roadTable"
    :row-key="rowKeyFun"
    :loading="tableLoading"
    :scroll="{ y: scroll }"
    ref="myTable"
    :rowClassName="rowClassName"
    :customRow="
      record => {
        return {
          onClick: () => {
            customRowClick(record)
          } // 点击行
        }
      }
    "
  >
    <!-- 表头内容插槽 -->
    <!-- <span v-for="item in columns" :slot="item.slots ? item.slots.title : ''" :key="item.key"> -->
      <!-- <a-icon :type="item.iconType" v-if="item.icon" /> -->
      <!-- 可用icon库,也可以自定义 -->
      <!-- <span class="icon-box" v-if="item.customIcon"></span> -->
      <!-- {{ item.value }} -->
    <!-- </span> -->

    <!-- 表体内容插槽 -->
    <template #bodyCell="{ column, record }">
      <slot :record="record" :text="record[column.key]" :name="column.key"> </slot>
    </template>

    <template #emptyText>
      <img src="../../assets/images/empty.png" alt="" class="empty-icon" />
      <div class="empty-text">暂无数据</div>
    </template>
  </a-table>
</template>

<script>
/**
 *  滚动表格
 * @author  阳坤(1194636148@qq.com)
 * @date    时间：2022/1/7/10:31
 */
import { get } from '@/utils'
export default {
  name: 'RoadTable',
  components: {},
  props: {
    scroll: {
      // 可滚动的高度
      default: 180,
      type: [Number, String, Boolean]
    },
    columns: {
      // 表头
      default: () => [],
      type: Array
    },
    dataSource: {
      // 表格数据
      default: () => [],
      type: Array
    },
    rowKey: {
      // 表格key
      default: '',
      type: [String, Number]
    },
    tableLoading: {
      // 表格加载数据loading
      default: false,
      type: Boolean
    },
    currentPageShow: {
      // 表格是否需要请求新数据
      default: false,
      type: Boolean
    },
    activeId: {
      // 表格选中项
      default: '',
      type: String
    }
  },
  data() {
    return {
      selectTableId: '' // 点击表格项id
    }
  },
  computed: {
    activeStoreId() {
      return get(this.$store, `state.config.detailConfig.data.${this.rowKey}`)
    }
  },
  methods: {
    /**
     *  设置key
     */
    rowKeyFun(record) {
      const key = record[this.rowKey] || record.id
      return key
    },

    /**
     *  表格行点击
     */
    customRowClick(record) {
      // this.selectTableId = record[this.rowKey] || record.id
      this.$emit('tableClick', record)
    },

    /**
     *  表格滚动事件
     */
    tableListener() {
      this.$nextTick(() => {
        // 获取表格元素
        var dom = document.querySelectorAll('.ant-table-body')[0]
        dom &&
          dom.addEventListener('scroll', () => {
            const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight
            // 等于0证明已经到底，可以请求接口
            if (scrollDistance <= 5) {
              // 当前页数小于总页数就请求
              if (this.currentPageShow) this.$emit('scrollEvent')
            }
          })
      })
    },

    /**
     *  表格行选中类名
     */
    rowClassName(_record) {
      return _record[this.rowKey] == this.activeId || _record[this.rowKey] === this.activeStoreId ? ' active' : null
    }
  },
  mounted() {
    this.tableListener()
  },
  watch: {}
}
</script>

<style scoped lang="less">
@import url(../../styles/themes);

.roadTable {
  height: 100%;

  /deep/ .ant-spin-nested-loading {
    height: 100%;

    .ant-spin-container,
    .ant-table,
    .ant-table-content,
    .ant-table-scroll,
    .ant-table-container {
      height: 100%;
      background: transparent;
    }
  }
}

/deep/.ant-table-tbody > tr.ant-table-row:hover > td,
/deep/.ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background: transparent;
}
/deep/.ant-table-fixed-header .ant-table-container .ant-table-header {
  background: #dee5f2;
}

/deep/.ant-table-thead > tr .ant-table-cell-scrollbar {
  display: none;
}

/deep/.ant-table-thead
  > tr
  > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
  width: 0;
}

/deep/.ant-table-tbody > tr > td,
/deep/.ant-table-thead > tr > th {
  border: none;
  padding: 8px 4px;
}

/deep/.ant-table-thead > tr > th {
  background: #dee5f2;
  font-size: 14px;
  font-family: Source Han Sans CN, Source Han Sans CN-Bold;
  font-weight: 700;
  color: #333333;
}

/deep/.ant-table-tbody > tr > td:hover {
  cursor: pointer;
}

/deep/.ant-table-placeholder > td {
  cursor: default !important;
  background: transparent !important;
}

/deep/.ant-table-row:nth-child(odd) {
  background-color: @row-odd-bg;
}
/deep/.ant-table-row:nth-child(even) {
  background-color: @row-even-bg;
}

/deep/.ant-table-row.active {
  background-color: @row-active-bg;
}
/deep/.ant-table-row:hover {
  background-color: @row-hover-bg;
}
.empty-icon {
  width: 170px;
  height: 92px;
  margin-top: 20px;
}
.empty-text {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
</style>
